// 主界面的组件
// 该组件是没有登陆的用户看到的界面
import {Layout, Menu} from 'antd';
import {useState} from "react";
import {Link, Outlet} from "react-router-dom";
import Icon, {HeartOutlined, SettingOutlined } from "@ant-design/icons";
import "./noUserHome.css";
const {Header, Footer, Sider, Content} = Layout;
const { SubMenu } = Menu;


// 主页组件，采用典型的页面布局
export default function NoUserHome() {
    const [current, setCurrent] = useState('index');

    function handleClick(e) {
        setCurrent(e.key);
    }

    return(
        <Layout>
            <Header>
                <Menu onClick={handleClick}  selectedKeys={[current]} mode="horizontal" theme="light">
                    <Menu.Item key="home" icon={<HeartOutlined/>}>
                        <Link to="/">主页</Link>
                    </Menu.Item>
                    <Menu.Item key="published" icon={<HeartOutlined/>}>
                        <Link to="/published">发布</Link>
                    </Menu.Item>
                    <Menu.Item  key="about" icon={<HeartOutlined/>}>
                        <Link to="/about">关于</Link>
                    </Menu.Item>
                    <SubMenu key="selfCenter" icon={<SettingOutlined />} title="个人中心">
                        <Menu.Item key="login" icon={<HeartOutlined/>}><Link to="/login">登陆</Link></Menu.Item>
                        <Menu.Item key="register" icon={<HeartOutlined/>}><Link to="/register">注册</Link></Menu.Item>
                    </SubMenu>
                </Menu>
                <Outlet/>
            </Header>
            <Layout>
                <Content style={{textAlign:"center"}}>
                    <p>adadazxcasd</p>
                    <p>adadazxcasd</p>
                </Content>
                <Sider  style={{
                    overflow: "auto",
                    height: "100vh",
                    position: "fixed",
                    left: 0,
                }} theme="light">侧边栏测试</Sider>
            </Layout>
            <Footer>Footer</Footer>

        </Layout>

    )
}